<template>
    <el-container>
        <el-main class="wrapper">
            <section class="panel cms-content">
                <div class="panel-body">
                    <el-form :model="form" ref="form" label-width="100px"
                             class="demo-ruleForm">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="标题：" :rules="[{ required: true, message: '请填写学院标题', trigger: 'blur'}]" prop="title">
                                    <el-input v-model="form.title" placeholder="请填写标题"></el-input>
                                </el-form-item>
                                <el-form-item label="内容：" :rules="[{ required: true, message: '请填写学院内容', trigger: 'blur'}]" prop="content">
                                    <vue-neditor-wrap ref="mobile" v-model="form.content" @ready="ready"
                                                      :config="myConfig"
                                                      :destroy="false"></vue-neditor-wrap>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="封面图：" :rules="[{ required: true, message: '请上传封面图', trigger: 'change'}]" prop="thumb">
                                    <span style="color: #888;">上传的封面图比例为4:5 !!!</span>
                                    <el-upload
                                            class="index-colllege-uploader"
                                            :action="upload"
                                            :show-file-list="false"
                                            name="image"
                                            :on-success="uploadSuccess"
                                            :before-upload="uploadBefore">
                                        <img v-if="form.thumb" :src="form.thumb"
                                             class="index-colllege">
                                        <i v-else class="el-icon-plus index-colllege-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item v-if="options.length" label="类目：" prop="cateid" :rules="[{ required: true, message: '请选择学院类目', trigger: 'blur'}]">
                                    <el-cascader  change-on-select :options="options" v-model="form.cateid"></el-cascader>
                                </el-form-item>
                                <el-form-item label="文件：" :rules="[{ required: true, message: '请上传文件', trigger: 'change'}]" prop="file">
                                    <span style="color: #888;">最多允许上传一个文件资源 !!!</span>
                                    <el-upload
                                            class="upload-demo"
                                            name="file"
                                            :action="upload_file"
                                            :limit="1"
                                            :on-change="uploadFileChange"
                                            :on-success="uploadFileSuccess">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                    </el-upload>
                                </el-form-item>

                                <el-form-item label="状态：" prop="status">
                                    <el-radio-group v-model="form.status">
                                        <el-radio border :label="1">正常</el-radio>
                                        <el-radio border :label="2">待审核</el-radio>
                                        <el-radio border :label="3">未通过</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <div>
                                    <el-button style="margin-left: 100px" type="primary" @click="update()">保存发布</el-button>
                                    <el-button style="float: right;margin-right: 100px" type="primary" @click="goback()">返回列表</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </section>
        </el-main>
    </el-container>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {CollegeInfo, CollegeUpdate,CateList} from '@/utils/request';
    import VueNeditorWrap from 'vue-neditor-wrap';
    export default {
        components: {VueNeditorWrap},
        data() {
            return {
                myConfig: {
                    // 你的UEditor资源存放的路径,相对于打包后的index.html
                    UEDITOR_HOME_URL: '/NEditor/',
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 540,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 关闭自动保存
                    enableAutoSave: false,
                    //关闭远程图片是否抓取到本地保存
                    catchRemoteImageEnable: false,
                    //是否启用元素路径，默认是显示
                    elementPathEnabled: false,
                    ////是否开启字数统计
                    wordCount: false,
                    //是否保持toolbar的位置不动,默认true
                    autoFloatEnabled: false
                },
                form: {
                    id: 0,
                    file: '',
                    title: '',
                    thumb: '',
                    content: '',
                    cateid: [],
                    status: 1,
                },
                editor: null,
                options: [],
                tagArr:null,
                tagsCurrent:[],//当前已选择的
            }
        },
        activated() {
            this.$store.dispatch('setActive', '/college');
            this.category();
            this.form = {
                id: 0,
                title: '',
                thumb: '',
                content: '',
                cateid: [],
                file: '',
                status: 1,
            };
        },
        computed: {
            ...mapGetters(['loading', 'upload','upload_file']),
        },
        methods: {
            uploadFileChange(file, fileList){
                this.fileList3 = fileList.slice(-3);
            },
            uploadFileSuccess(res, file) {
                this.form.file = res.data.path;
            },
            // 分类
            category(){
                CateList({params:{pid:1020}}).then((res)=>{
                    if (res.code) {
                        this.$message.error(res.msg);
                    } else {
                        this.options = res.data;
                    }
                })
            },
            //上传封面
            uploadSuccess(res, file) {
                this.form.thumb = res.data.path;
            },
            uploadBefore(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传封面图片只能是 JPG | PNG | GIF格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传封面图片大小不能超过 2M!');
                }
                return isJPG && isLt2M;
            },
            ready(editor) {
                this.editor = editor;
                if(this.$route.query.id){
                    this.info(this.$route.query.id);
                }else{
                    this.editor.setPlaceholder('请填写学院内容');
                }
            },
            info(id) {
                CollegeInfo({params: {id: id}}).then((res) => {
                    if(res.code){
                        this.$message.error(res.msg);
                    }else{
                        this.form = {
                            id: res.data.id,
                            file:res.data.file,
                            title: res.data.title,
                            thumb: res.data.thumb,
                            content: res.data.content,
                            cateid: res.data.cateid,
                            status: res.data.status,
                        };
                    }
                });
            },
            goback() {
                this.$router.push({name: 'College'})
            },
            //更新
            update() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        CollegeUpdate(this.form).then((response) => {
                            if (response.code) {
                                this.$message.error(response.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose: () => {
                                        this.$router.push({name: 'College'})
                                    }
                                });
                            }
                        });
                    }
                });

            },
        },
    }
</script>
